<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app" v-cloak>
			<ul>
				<li v-for="item,index in users">{{item}}</li>
			</ul>
			<ul>
				<li v-for="item in users">{{item}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in users">{{item}}-{{index}}</li>
			</ul>
		</div>
		<script>
			/*
				v-for循环
					语法：v-for="item,index in 数组"

				根据数据生成重复的结构，就在元素行间写上这个指令
			*/
			let arr = ['leo','momo','join'];

			let vm = new Vue({
				el: '#app',
				data: { 
					users: arr
				}
			});



		</script>
	</body>
</html>